<template>
  <el-drawer
    title="编辑"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="moduleName">
          <el-input
            v-model="form.moduleName"
            :placeholder="placeholderInput"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="导航栏" prop="navFlag">-->
        <!--          <el-switch v-model="form.navFlag" />-->
        <!--        </el-form-item>-->
        <el-form-item label="是否显示">
          <el-switch v-model="form.showFlag" />
        </el-form-item>
        <el-form-item label="是否外链">
          <el-switch v-model="form.isOut" @change="handleOut" />
        </el-form-item>
        <el-form-item label="外链地址" v-show="outHrefVisible">
          <el-input
            v-model="form.outHref"
            :placeholder="placeholderInput"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级">
          <el-cascader
            class="select-width"
            v-model="form.pId"
            :placeholder="placeholderSelect"
            :options="tableData"
            :props="optionProps"
            clearable
            :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="序号">
          <el-input
            v-model="form.mOrder"
            :placeholder="placeholderInput"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_INPUT, PLEASE_SELECT } from "@/util/constant";
import { getModuleDetailApi, updateModuleApi } from "@/api/modules/modules.api";
// import { getPathById } from "@/util/util";

export default {
  props: ["tableData"],
  data() {
    return {
      visible: false,
      outHrefVisible: false,
      placeholderInput: PLEASE_INPUT,
      placeholderSelect: PLEASE_SELECT,
      form: {
        moduleId: "",
        moduleName: "",
        // navFlag: false,
        showFlag: false,
        isOut: false,
        outHref: "",
        pId: "",
        mOrder: 1,
      },
      parentId: "",
      optionProps: {
        value: "moduleId",
        label: "moduleName",
        children: "childList",
        checkStrictly: true,
      },
      drawerSize: DRAWER_SIZE,
      rules: {
        moduleName: [
          { required: true, message: PLEASE_INPUT, trigger: "blur" },
        ],
      },
      module: [],
    };
  },
  watch: {
    tableData: {
      handler(value) {
        this.module = value;
      },
      deep: true,
    },
  },
  methods: {
    async init(id) {
      const res = await getModuleDetailApi(id);
      this.parentId = res.pId;
      this.form = {
        moduleId: res.moduleId,
        moduleName: res.moduleName,
        // navFlag: res.navFlag,
        showFlag: res.showFlag,
        outHref: res.outHref,
        isOut: res.isOut,
        pId: res.pId,
        mOrder: res.mOrder,
      };
      this.outHrefVisible = res.isOut;
      this.visible = true;
      // console.log("res.pid", res.pid);
      // this.getModulesList(res.moduleId);
    },
    handleClose() {
      this.form = {};
      this.visible = false;
      this.outHrefVisible = false;
    },
    async handleAdd() {
      // this.form.morder = Number(this.form.mOrder);
      if (Array.isArray(this.form.pId)) {
        this.form.pId = this.form.pId.slice(-1)[0];
      } else {
        this.form.pId = this.parentId;
      }
      // this.form.pid = this.form.pid.length > 0 ? this.form.pid.slice(-1)[0] : 0;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await updateModuleApi(this.form);
          this.$message({
            message: "成功",
            type: "success",
          });
          this.form = {};
          this.outHrefVisible = false;
          this.visible = false;
          this.$emit("getParentTableData");
        }
      });
    },
    handleOut(value) {
      this.outHrefVisible = value;
    },
  },
};
</script>
<style scoped>
.select-width {
  width: 100%;
}
</style>
